<template>
	<div class="wrapper">
		<div class="wrapper-content">
			<!-- 头部 -->
			<div class="header">
				<div class="header-left">
					<image :src="circleDetail.thumb_img_url" mode="aspectFill"></image>
				</div>
				<div class="header-right">
					<div class="name">{{circleDetail.name}}</div>
					<div class="msg">
						<div>关注 <span>{{circleDetail.user_num}}</span></div>
						<div>总流量 <span>{{circleDetail.total_views}}</span></div>
					</div>
				</div>
			</div>
			<!-- 头部end -->
			
			<!-- 简介 -->
			<div class="intro">
				<div class="tit">
					<div>圈子简介</div>
					<div class="editor" @click="toCircleIntro" v-if="circleDetail.is_owner==1">
						<image src="../../../static/img/editor.png" mode="widthFix"></image>
						编辑
					</div>
				</div>
				<div class="content">
					{{circleDetail.desc?circleDetail.desc:'暂未有简介'}}
				</div>
			</div>
			<!-- 简介end -->
			
			<!-- 列表 -->
			<div class="cell-group">
				<div class="cell" @click="toCircleApply">
					  <div class="label">圈主申请</div>
					  <div class="arrow-right">
						  <span class="tips">{{circleDetail.circle_master==1?'已有圈主':'未有圈主'}}</span><img src="/static/img/right.png" />
					  </div>
				</div>
				<div class="cell" @click="toCircleAdmin" v-if="circleDetail.circle_master==1">
					  <div class="label">圈内管理员</div>
					  <div class="arrow-right"><img src="/static/img/right.png" /></div>
				</div>
				<div class="cell" @click="toCircleSort" v-if="circleDetail.is_owner==1">
					<div class="label">分类管理</div>
					<div class="arrow-right"><img src="/static/img/right.png" /></div>
				</div>
				<div class="cell" @click="toCirclePhotoGraph" v-if="circleDetail.circle_master==1">
					  <div class="label">圈子相册</div>
					  <div class="arrow-right"><span class="tips">{{circleDetail.picture_total_number}}</span><img src="/static/img/right.png" /></div>
				</div>
			</div>
			<div class="imgList">
				<div class="img-wrapper" v-for="(item,index) of circleDetail.picture_array_url" :key="index" @click="prevImg(item,circleDetail.picture_array_url)">
					<image :src="item" mode="aspectFill" ></image>
				</div>
			</div>
			
			<!-- 列表end -->
			
			<div class="btn-wrapper">
				<div class="btn " v-if="circleDetail.is_follow" @click="unFollowCircle">
					已关注
				</div>
				<div class="btn btn-follow" v-else @click="followCircle">
					关注
				</div>
				<div class="btn btn-into" @click="skipLoop">
					进圈
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	let defaultBanner=require('../../../static/img/123.jpg')
	export default {
		data() {
			return {
				defaultJpg:defaultJpg,
				defaultBanner:defaultBanner,
				circleDetail:'',
				circle_id:'',
				loadfirst:0//首次加载
			};
		},
		methods:{
			//获取圈子首页帖子列表+最新评论
			async getArticleList(){
			    let params = {
			        circle_id: this.circle_id,
					page:1,
					limit:0,
			        user_token: uni.getStorageSync('userToken')
			    }
			    const res = await this.$api.getCircleArticle(params);
			    if (res.data.level == 'success'){
			        this.circleDetail = res.data.data;
			        console.log(res)
			    }
			},
			//关注圈子
			async followCircle(){
			    let params = {
			        circle_id: this.circle_id,
			        user_token: uni.getStorageSync('userToken')
			    }
			    const res = await this.$api.followCircle(params);
			    if (res.data.level == 'success'){
			        uni.showToast({
			            icon:'none',
			            title:res.data.message
			        })
					this.getArticleList()
			    } else {
			        uni.showToast({
			            icon:'none',
			            title:res.data.message
			        })
			    }
			},
			//取消关注圈子
			async unFollowCircle(){
				let params = {
					circle_id: this.circle_id,
					user_token: uni.getStorageSync('userToken')
				}
				const res = await this.$api.unFollowCircle(params);
				if (res.data.level == 'success'){
					uni.showToast({
						icon:'success',
						title:res.data.message
					})
					this.getArticleList()
					// this.onWXshow();
				} else {
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
			},
			//进圈
			skipLoop(){
			    uni.redirectTo({
			        url: '/pages/circlebar/circlebarhome/circlebarhome?circle_id='+this.circle_id
			    })
			},
			toCircleApply(){
				//跳转圈主申请
				uni.navigateTo({
					url:'/pages/circlebar/circleApply/circleApply?circle_id='+this.circle_id
				})
			},
			toCirclePhotoGraph(){
				//跳转圈相册
				uni.navigateTo({
					url:'/pages/circlebar/circlePhotograph/circlePhotograph?circle_id='+this.circle_id
				})
			},
			toCircleIntro(){
				//跳转编辑简介
				this.$bus.$data.circleIntro=this.circleDetail.desc;
				uni.navigateTo({
					url:`/pages/circlebar/circleIntro/circleIntro?circle_id=${this.circle_id}`
				})
			},
			toCircleAdmin(){
				uni.navigateTo({
					url:'/pages/circlebar/circlebarAdmin/circlebarAdmin?circle_id='+this.circle_id
				})
			},
			toCircleSort(){
				uni.navigateTo({
					url:'/pages/circlebar/circlebarSort/circlebarSort?circle_id='+this.circle_id
				})
			},
			prevImg(item,urls){
				//预览图片
				let _this=this
				uni.previewImage({
					current:item,
					urls:urls
				})
			},
		},
		onLoad(options) {
			this.circle_id = options.circle_id;//15
			this.getArticleList()
		},
		onShow() {
			if(this.loadfirst!=0){
				this.getArticleList()
			}
			this.loadfirst++
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	@mixin padding20(){
		padding:0 30rpx
	};
	.wrapper{
		background: #F1F4F7;
		/*min-height: 100vh;*/
		//头部
		.header{
			@include padding20();
			background: #fff;
			@include flex(flex-start);
			.header-left{
				image{
					width:130rpx;
					height:130rpx;
					border-radius:16rpx;
					margin:30rpx 30rpx 30rpx 0;
				}
			}
			.header-right{
				.name{
					font-size:32rpx;
					font-weight:600;
				}
				.msg{
					margin-top:20rpx;
					@include flex(flex-start);
					font-size:24rpx;
					color:rgba(139,141,147,1);
					span{
						padding:0 8rpx;
						font-weight:600;
						color:rgba(255,163,43,1);
					}
					&>div{
						margin-right:40rpx ;
					}
				}
			}
			
		}
		
		//介绍
		.intro{
			@include padding20();
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			background: #fff;
			.tit{
				@include flex(flex-start);
				font-size:32rpx;
				margin-bottom: 22rpx;
			}
			.editor{
				margin-left:40rpx;
				@include flex(flex-start);
				color:#078BFF;
				font-size:32rpx;
				image{
					width:32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}
			.content{
				font-size: 28rpx;
				line-height:56rpx;
				@include  ellipsis(3);
			}
		}
		
		//功能列
		.cell-group{
			@include padding20();
			background: #fff;
			font-size: 32rpx;
			margin-top:20rpx;
			.cell{
				padding:30rpx 0;
				@include flex(flex-start);
				.label{
					font-size: 28rpx;
					font-weight: 600;
					width:150rpx;
				}
				.arrow-right{
					flex:1;
					text-align: right;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					img{
						width: 28rpx;
						height: 28rpx;
					}
				}
				.tips{
					display: inline-block;
					margin-right: 10rpx;
					color:#8B8D93;
				}
			}
		}
		
		//图片列
		.imgList{
			width: 100%;
			background: #FFFFFF;
			padding: 10rpx 32rpx;
			@include flexWrap(flex-start);
			.img-wrapper{
				@include flex(flex-start);
				width: 25%;
				image{
					width:20vw ;
					height: 20vw;
					border-radius: 8rpx;
				}
			}
			
		}
		
		.btn-wrapper{
			width: 100%;
			@include flex();
			position: fixed;
			bottom: 0;
			background: #fff;
			padding: 20rpx;
			.btn{
				background: #DADADA;
				margin: 0 10rpx;
				font-size:28rpx;
				text-align: center;
				font-weight: 600;
				
				width:48%;
				border-radius: 16rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
			.btn-follow{
				background: #FFE226;
			}
			.btn-into{
				background: #FFE226;
			}
		}
	}
</style>
